<template>
	
	<view class="main" :style="`padding-top:${systemBarHeight+64}px`">

		<view class="img">
			<image :src="avatarUrl" mode="widthFix"></image>
			<text>{{nickName}}</text>
		</view>
		<view class="btn">
			<button type="primary" @click="register">授权登录</button>
		</view>

	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';    
	import {login} from '@/utils/axios.js'
	import storage from '@/utils/storage.js'
	export default {
		components: {			
		},
		setup() {
			const api="http://localhost:3000"
			const data = reactive({
							
							systemBarHeight: null,
							userData:{
								userId:null,
								nickName: null,
								code:null								
							},
							nickName: null,
							avatarUrl: "/static/logo.png"
						})
			onLoad(() => {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								data.nickName = infoRes.userInfo.nickName
								data.avatarUrl = infoRes.userInfo.avatarUrl
                                data.userData.nickName=infoRes.userInfo.nickName
                                data.userData.code=infoRes.code
								console.log(infoRes,infoRes.code)     
							}
						});
					}
				});

			})
			
			// #ifdef MP-WEIXIN
            
			const getSysteminfo = () => {
				uni.getSystemInfo({
					success: res => {
						data.systemBarHeight = res.statusBarHeight;
					}
				});
			}
			getSysteminfo()
			// #endif
			const register=()=>{
				     let obj ={
						 userName:1111,
						 passWord:1111
					 }
					login(obj).then(res=>{
						console.log(res);
						if(res.code==200){
							storage.set('userId',res.userId)
							storage.set('userName',res.userName)
							 uni.switchTab({
								 url: '/pages/home/index/index'
							 })
						}
					})
					 
			}
			return {
				...toRefs(data),register
			}
		}
	}
</script>

<style lang="scss">
	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.img {
		width: 100%;
		flex-direction: column;
		display: flex;
		align-items: center;
		margin-top: 240rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			background-color: antiquewhite;
			overflow: hidden;
		}

		text {
			margin-top: 36rpx;
		}
	}

	.btn {
		width: 100%;
		margin-top: 60px;

		button {
			background-color: #0066ff;
			width: 80%;
			border: none;
		}
	}
</style>
